class BgGrad extends HTMLElement {
  constructor() {
    super();

    const template = document.createElement('template');

    template.innerHTML = `
    <style>
      :host {
        overflow: hidden;
        background: linear-gradient(45deg, #00F5D4, #01BEFF, #9A5CE5, #F15BB5);
		    background-size: 500% 500%;
        animation: gradientBG 15s ease infinite;
      }

      @keyframes gradientBG {
        0% {
          background-position: 0% 50%;
        }
    
        50% {
          background-position: 100% 50%;
        }
    
        100% {
          background-position: 0% 50%;
        }
      }
    </style>

    
    <div class="container">
      <slot name="default">默认插槽</slot>
    </div>
    `;

    let shadow = this.attachShadow({
      mode: 'closed'
    });

    let content = template.content.cloneNode(true);
    shadow.appendChild(content);
  }

  // 生命周期函数
  connectedCallback() {
    console.log('当 custom element首次被插入文档DOM时，被调用。');
  }

  disconnectedCallback() {
    console.log('当 custom element从文档DOM中删除时，被调用。');
  }

  adoptedCallback() {
    console.log('当 custom element被移动到新的文档时，被调用。');
  }

  attributeChangedCallback(name, oldVal, newVal) {
    console.log('当 custom element增加、删除、修改自身属性时，被调用。');
    console.log(name, oldVal, newVal);
  }
}

window.customElements.define('bg-grad', BgGrad);